import React from 'react';
import { Tooltip } from 'antd';
import { size } from 'lodash';
import styles from './index.less';

// 展示差异
const Difference = ({ children, tip, tipCover, className, table, diffWrapStyle, ...rest }) => {
    const tipsHasBr = String(tip)?.replace(/[\r\n]+/g, '<br/>');
    const tipHtml = (
        // eslint-disable-next-line react/no-danger
        <div dangerouslySetInnerHTML={{ __html: `原始值：${size(tipsHasBr) === 0 ? '<未填写>' : tipsHasBr}` }} />
    );
    const title = tipCover || tipHtml;
    return (
        <div className={`${styles.differenceWrap} ${className}`} style={diffWrapStyle}>
            {tipsHasBr !== 'undefined' || tipCover ? (
                <Tooltip
                    className={`${styles.diffWrap} ${table ? styles.tableDeff : ''}`}
                    title={title}
                    placement="topLeft"
                    getPopupContainer={trigger => trigger.parentNode}
                    {...rest}
                >
                    <div>{children}</div>
                </Tooltip>
            ) : (
                children
            )}
        </div>
    );
};

export default Difference;
